<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">

    <ui:composition template="templates/creatively-article.xhtml">

        <ui:param name="pageTitle" value="Contact Us"/>
        <ui:param name="webSiteTitle" value="X Files"/>

        <ui:define name="submenu">
            <ul>
                <li><a href="#{request.contextPath}/faces/about.xhtml">About</a></li>
                <li class="selected"><a href="#">Contact Us</a></li>
                <li><a href="#{request.contextPath}/faces/faq.xhtml">FAQ</a></li>
                <li><a href="#{request.contextPath}/faces/tutorial.xhtml">Tutorial</a></li>
            </ul>
        </ui:define>

        <ui:define name="categories">
            <!-- Contact form -->
            <h3>Send us an e-mail</h3>
            <h:form id="contact_form" class="contact_form">
                <div class="status">
                    <h:messages style="margin-left: 0px;" id="status_messages" class="message" showDetail="true" errorClass="message_bad" warnClass="message_bad" infoClass="message_good"/>
                </div>
                <h:inputText class="input-large" id="name" placeholder="Your name" value="#{feedbackBean.name}"/>
                <h:inputText id="email" class="input-large" placeholder="Your e-mail" value="#{feedbackBean.email}"/>
                <h:inputTextarea id="message" style="width: 266px; height: 160px;" value="#{feedbackBean.message}" placeholder="Your feedback message"/>
                <div class="QapTcha" style="width: 100%;"/>
                <div style="text-align: right;">
                    <h:commandLink class="button_green" value="Send message" actionListener="#{feedbackBean.sendFeedbackAction}">
                        <f:ajax execute="@form" render="status_messages message email name"/>
                    </h:commandLink>
                </div>
            </h:form>
            <h3>Advertisement</h3>
            Place for ads.	
        </ui:define>

        <ui:define name="content">
            <h2>Contact Us</h2>

            <!-- Text -->
            <section class="grid_8">
                <p>Nulla id nibh nec nulla malesuada elementum. Morbi quam ante, blandit non sodales tristique, pellentesque eget sem. In quis purus mi, ut luctus velit. Mauris faucibus bibendum mauris, non dapibus lectus commodo nec.</p>
                <p>Praesent id felis porta turpis dictum ultricies non sit amet neque. Quisque tristique, massa et tempor bibendum, nisi ipsum scelerisque elit, sit amet vehicula nisl nunc vitae magna. Donec ultricies mauris purus. Vestibulum semper accumsan sapien faucibus scelerisque.</p>
            </section>

            <hr class="grid_8" />

            <!-- Offices -->
            <ul class="offices grid_8" style="list-style-type: none;">
                <li style="list-style: none;">
                    <img src="img/icons/flag_germany.png" alt="France" />
                    <p class="address">
                        123 Main Street<br />
                        840 00 Berlin<br />
                        Germany<br />
                    </p>
                    <p class="contact">
                        <strong>E-mail:</strong> admin@xfiles.in<br />
                        <strong>Phone:</strong> +421 123 111 222<br />
                        <strong>Fax:</strong> +421 123 111 222<br />
                    </p>
                </li>
            </ul>

            <hr class="grid_8" />

            <!-- Map -->
            <section class="map grid_8">
                <script>
                    $(function() {
                        markers = "Germany"; // Set the address for marker
                    });
                </script>		  
                <div id="map"><a href="#"><img src="img/placeholder.png" alt="Map" class="shadow" /></a></div>
            </section> 
        </ui:define>
    </ui:composition>

</html>